import React from 'react'

const Tabbar = () => {

    // 钩子函数初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    const [active,setActive] = React.useState('/')

    const location = React.$Router.useLocation()

    React.useEffect(() => {
        setActive(location.pathname)
    })

    const To = (value) => {
        setActive(value)
        navigate(value)
    }

    return (
        <>
            <React.$Vant.Tabbar activeColor='#ef6382' onChange={To} value={active}>
                <React.$Vant.Tabbar.Item icon={<React.$Icon.WapHomeO />} name="/" >首页</React.$Vant.Tabbar.Item>
                <React.$Vant.Tabbar.Item icon={<React.$Icon.AppsO />} name="/product/product/index">租赁商品</React.$Vant.Tabbar.Item>
                <React.$Vant.Tabbar.Item icon={<React.$Icon.Description />} name="/category/category/index">学术</React.$Vant.Tabbar.Item>
                <React.$Vant.Tabbar.Item icon={<React.$Icon.Contact />} name="/user/base/index">我的</React.$Vant.Tabbar.Item>
            </React.$Vant.Tabbar>
        </>
    )
}

export default Tabbar